<template>
  <view class="create_complaint">
    <!-- <view class="common_warp com_type">
      <view class="common_title com_type_title">
        <text style="color: #c82a29">*</text>
        问题类型
      </view>
      <view class="type_select">
        <view
          class="sel_contents"
          :class="complaintForm.type == item.type ? 'sel_active' : ''"
          v-for="(item, index) in typeList"
          :key="item.type"
          @click="handlerSelectType(item.type, item.type_name)"
        >
          {{ item.type_name }}
        </view>
      </view>
    </view>
    <view class="common_warp">
      <view class="common_title">
        <text style="color: #c82a29">*</text>
        联系方式
      </view>
      <view class="connact_tel">
        <input
          class="tel_input"
          placeholder-style="font-size:24rpx; font-weight:normal;color: #9FA1A8;"
          type="text"
          v-model="complaintForm.phone"
          placeholder="请输入手机号码"
        />
      </view>
    </view> -->
    <view class="common_warp">
      <view class="common_title">
        <text style="color: #c82a29">*</text>
        问题描述
      </view>
      <view class="connact_tel question_text">
        <textarea
          v-model="complaintForm.desc"
          placeholder="请描述具体内容"
          placeholder-style="font-size:24rpx; font-weight:normal;color: #9FA1A8; line-height:30rpx;"
          class="question_cons"
          :maxlength="200"
        />
        <view class="text_num">
          {{ complaintForm.desc ? complaintForm.desc.length : 0 }}/200
        </view>
      </view>
      <!-- <view class="upload_img">
        <view
          class="upload_img_cons img_for"
          v-for="(item, index) in complaintForm.imgs"
        >
          <image class="cons_image" :src="item" mode="aspectFill"></image>
          <image
            @click="deleteImage(index)"
            class="close_icon"
            :src="closeIcon"
            mode=""
          ></image>
        </view>

        <view
          class="upload_img_cons"
          v-if="complaintForm.imgs.length < imgNum"
          @click="uploadImage"
        >
          <view class="add_icon">
            <view class="icon_1"></view>
            <view class="icon_1 icon_2"></view>
            <view class="pic_num">
              {{ complaintForm.imgs.length }}/{{ imgNum }}
            </view>
          </view>
        </view>
      </view> -->
    </view>

    <view class="btn_warp">
      <view class="btn_left" @click="gotoBack">返回</view>
      <view class="btn_left btn_right" @click="gotoSubmit">提交</view>
    </view>
  </view>
</template>

<script>
import { addByStudent } from "../../../api/index";
import { uploadOss } from "@/common/upload/upload.js";
const scopeAlbum = function () {
  return new Promise((resolve, reject) => {
    uni.getSetting({
      success(res) {
        if (res.authSetting["scope.album"] == false) {
          uni.showModal({
            title: "温馨提示",
            content: "为了更好的体验小程序,请授权相册哦~",
            showCancel: false,
            success() {
              uni.openSetting({
                success(res2) {
                  if (res2.authSetting["scope.album"]) {
                    resolve();
                  } else {
                    reject("error2");
                  }
                },
                fail(err) {
                  reject("error2");
                },
              });
            },
          });
        } else {
          resolve();
        }
      },
      fail(err) {
        reject("error");
      },
    });
  }).then(undefined, (error) => {
    throw new Error(error);
  });
};
export default {
  props: {
    typeList: {
      type: Array,
      default: [],
    },
    value: {
      type: Object,
      default: {},
    },
    imgNum: {
      type: Number,
      default: 4,
    },
  },
  data() {
    return {
      complaintForm: {},
      closeIcon: require("static/close.png"),
    };
  },
  watch: {
    value: {
      deep: true,
      immediate: true,
      handler(news) {
        console.log(news, "newsvv---");
        this.complaintForm = news;
      },
    },
  },
  methods: {
    handlerSelectType(id, name) {
      this.complaintForm.type = id;
      this.complaintForm.type_name = name;
      console.log(this.complaintForm, "this.complaintForm");
      // this.$set(this.complaintForm,'type_id',id)
    },
    uploadImage() {
      var that = this;
      /*#ifdef MP*/
      return scopeAlbum().then(function (response) {
        uni.chooseImage({
          count: that.imgNum - that.complaintForm.imgs.length, //默认9
          sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
          sourceType: ["album"], //从相册选择
          success: function (res) {
            console.log(res);
            that.upImg(res);
          },
        });
      });
      /*#endif*/
      /*#ifdef APP-PLUS || H5*/
      uni.chooseImage({
        count: that.imgNum - that.complaintForm.imgs.length, //默认9
        sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ["album"], //从相册选择
        success: function (res) {
          console.log(res);
          that.upImg(res);
        },
      });
      /*#endif*/
    },
    async upImg(image_data) {
      console.log(image_data, "image_data");
      let that = this.complaintForm.imgs;
      for (let obj of image_data.tempFilePaths) {
        // let res = await uploadOss(obj, 'complaintImg', '') //图片上传阿里云
        // let temp = res.data.url
        let temp = obj;
        if (that.length < this.imgNum) {
          that.push(temp);
        }
      }
      this.complaintForm.imgs = that;
    },
    deleteImage(index) {
      this.complaintForm.imgs.splice(index, 1);
    },
    gotoBack() {
      uni.navigateBack({
        delta: 1,
      });
    },
    async gotoSubmit() {
      let params = {
        content: this.complaintForm.desc,
      };
      const res = await addByStudent(params);
      console.log(res, ";ssssss");
      uni.showToast({
        title: "保存成功",
        icon: "none",
        duration: 1500,
      });
      uni.redirectTo({
        url: "/pages/complaint/index",
      });
    },
  },
};
</script>

<style>
.create_complaint {
  width: 100%;
}

.com_type {
  padding-bottom: 20rpx;
}

.type_select {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.sel_contents {
  display: inline-block;
  padding: 14rpx 20rpx;
  box-sizing: border-box;
  border-radius: 100rpx;
  background: #f5f6fa;
  margin-right: 12rpx;
  color: #9fa1a8;
  font-family: PingFang SC;
  font-size: 24rpx;
  font-style: normal;
  font-weight: 400;
  line-height: 24rpx;
  margin-bottom: 20rpx;
}

.sel_active {
  background: #5475ff;
  color: #fff;
}

.connact_tel {
  width: 100%;
  height: 88rpx;
  padding: 0 24rpx;
  box-sizing: border-box;
  border-radius: 12rpx;
  background: #f5f6fa;
  overflow: hidden;
}

.tel_input {
  width: 100%;
  height: 88rpx;
  display: flex;
  align-items: center;
}

.question_text {
  height: 500rpx;
  position: relative;
  padding: 24rpx;
  margin-bottom: 20rpx;
}

.text_num {
  position: absolute;
  bottom: 24rpx;
  right: 24rpx;
  color: #9fa1a8;
  font-family: PingFang SC;
  font-size: 24rpx;
  font-style: normal;
  font-weight: 400;
  line-height: 28rpx;
}

.upload_img {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.upload_img_cons {
  width: 144rpx;
  height: 144rpx;
  background: #f5f6fa;
  position: relative;
  margin-bottom: 20rpx;
}
.img_for {
  margin-right: 12rpx;
}
.img_for:last-child {
  margin-right: 0;
}
.cons_image {
  display: block;
  width: 144rpx;
  height: 144rpx;
  border-radius: 12rpx;
}

.add_icon {
  width: 36rpx;
  height: 44rpx;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.icon_1 {
  width: 36rpx;
  height: 4rpx;
  border-radius: 20rpx;
  background: #9fa1a8;
}

.icon_2 {
  transform: rotate(-90deg);
}

.pic_num {
  color: #9fa1a8;
  font-family: PingFang SC;
  font-size: 22rpx;
  font-style: normal;
  font-weight: 400;
  line-height: 28rpx;
  /* 127.273% */
  padding-top: 24rpx;
}
.close_icon {
  width: 32rpx;
  height: 32rpx;
  display: block;
  position: absolute;
  top: -12rpx;
  right: -10rpx;
  z-index: 99;
}
.btn_warp {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.btn_left {
  width: 336rpx;
  height: 88rpx;
  border-radius: 12rpx;
  background: rgba(84, 117, 255, 0.1);
  color: #5475ff;
  text-align: center;
  font-family: PingFang SC;
  font-size: 30rpx;
  font-style: normal;
  font-weight: bold;
  line-height: 30rpx; /* 15px */
  display: flex;
  justify-content: center;
  align-items: center;
}
.btn_right {
  background: #5475ff;
  color: #fff;
}
</style>
